<div>
    <el-row>
        <el-col :span="11">
            <el-card>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                    <el-form-item label="smartbi地址的标签" prop="title">
                        <el-input v-model="ruleForm.title" name="title" placeholder="V856,v95,v10"></el-input>
                    </el-form-item>
                    <el-form-item label="smartbi的地址" prop="path" v-if="isLocation">
                        <el-input v-model="ruleForm.path" name="path" placeholder="smartbi地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">立即创建</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="13">
            <el-card>
                <el-table :data="this.$store.state.titles" style="width: 100%" border="true" stripe="true">
                    <el-table-column label="标签" align="center" prop="title" min-width="15%">
                        <template slot-scope="scope">
                            <div @click="openWindowFile(scope.row.path)">
                                <el-tag :key="scope.row.title"
                                        type=""
                                        effect="dark" class="changeHandle">
                                    {{scope.row.title}}
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="路径" align="center" prop="path" min-width="65%">
                        <template slot-scope="scope">
                            <div @click="setCopyText(scope.row.path, $event)" class="changeHandle">
                                {{scope.row.path}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" min-width="20%" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-popconfirm
                                    confirm-button-text='删除'
                                    cancel-button-text='取消'
                                    icon="el-icon-delete"
                                    icon-color="red"
                                    @confirm="handleDelete(scope.$index, scope.row)"
                                    :title="'确认删除' + scope.row.title + '标签吗？'">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        slot="reference"
                                >删除
                                </el-button>
                            </el-popconfirm>

                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog title="编辑标签" :visible.sync="dialogFormVisible">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                        <el-form-item label="extension地址的标签" prop="title">
                            <el-input v-model="ruleForm.title" name="title" placeholder="V856,v95,v10"></el-input>
                        </el-form-item>
                        <el-form-item label="extension的地址" prop="path" v-if="isLocation">
                            <el-input v-model="ruleForm.path" name="path"
                                      placeholder="smartbi地址或者精确到extension.list"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="modify">确 定</el-button>
                    </div>
                </el-dialog>
            </el-card>
        </el-col>
    </el-row>
</div>